class MyIndicators{

	static pitch_bound=30;

    static bindCompass(viewer, compass)
    {
		viewer.scene.preRender.addEventListener(()=>{
			let heading= viewer.camera.heading*180/Math.PI;
			compass.style.transform = 'rotate(' + heading + 'deg)';
		}); 
	}

	static setRotate(component, heading){
		component.style.transform = 'rotate(' + heading + 'deg)';		
	}

	static setCameraHeading(component, heading){
		MyIndicators.setRotate(component, heading);		
	}

	static setUavHeading(component, heading){
		MyIndicators.setRotate(component, heading);		
	}

	static setCameraRoll(component, roll){
		MyIndicators.setRotate(component, roll);		
	}

	static setUavRoll(component, roll){
		MyIndicators.setRotate(component, roll);		
	}

	static setCameraHeadingField(component_heading, component_field, heading, field){
		MyIndicators.setRotate(component_heading, heading);	
		var  ctx=component_field.getContext('2d');
		var size=150;
		component_field.width = size;
		component_field.height = size;

		/*把起点放到圆心位置*/
		ctx.moveTo(size/2,size/2);
		var from_r=(heading-field/2-90)*Math.PI/180;
		var to_r=(heading+field/2-90)*Math.PI/180;		
		ctx.arc(size/2,size/2,size/4.5,from_r,to_r,false);
		ctx.closePath();

		var c_r=heading*Math.PI/180;
		var t_x=Math.sin(c_r)*size/4.5+size/2;
		var t_y=size/2-Math.cos(c_r)*size/4.5;
		let gradient = ctx.createLinearGradient(size/2, size/2, t_x, t_y);
		gradient.addColorStop(0, "#ff0000");
		gradient.addColorStop(1, "#232323");
		ctx.fillStyle=gradient;	
		ctx.fill();
	}


	static setPitch(component, pitch){
		if(pitch>MyIndicators.pitch_bound){pitch = MyIndicators.pitch_bound;}
		else if(pitch<-MyIndicators.pitch_bound){pitch = -MyIndicators.pitch_bound;}
		component.style.top = pitch*0.7 + '%';
	}

	static setUavPitch(component, pitch){
		MyIndicators.setPitch(component, pitch);
	}

	static setCameraPitch(component, pitch){
		MyIndicators.setPitch(component, pitch);
	}
}